<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script type="module">
    // import {
    //     createRenderer,
    //     render,
    //     h
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js'
    // import {
    //     createRenderer,
    //     render,
    //     h
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js'
    import {
        // renderOptions,
        h,
        render,
        Fragment,
        Text
    } from "./runtime-dom.js"



    // const vueComponent = {
    //     data() {
    //         return {
    //             name: 'zs',
    //             age: 0
    //         }
    //     },
    //     // this= 组件实例，内部不会通过类来产生实例
    //     render() {
    //         // setTimeout(() => {
    //         //     this.age++
    //         //     this.age++
    //         // }, 1000)
    //         return h(Fragment, [
    //             h('div', this.name),
    //             h('div', this.age),
    //         ])
    //     }
    // }
    // // 组件两个虚拟节点组成，h(vueComponent) = vnode1 组件虚拟节点
    // //  render 返回的虚拟节点 这个才是最终要渲染的内容 =subTree
    // render(h(vueComponent), document.body)




    // 属性 attrs（非响应式   props响应式）
    //  所有属性 - propsOptions = attrs
    const vueComponent = {
        props: {
            name: String,
            age: Number
        },
        data() {
            return {
                x: 'x',
                y: 'y'
            }
        },
        render(proxy) {
            // console.log(proxy.$attrs);
            console.log(proxy, '====');


            return h('div', [
                // h('div', proxy.$attrs.name),
                // h('div', proxy.$attrs.age),
                h('div', proxy.name),
                h('div', proxy.age),
                h('div', proxy.x),
                h('div', proxy.y),
                h('div', this.$attrs.a),
                h('div', this.$attrs.b),

            ])
        }
    }
    render(h(vueComponent, { name: 'zs', age: 18, a: 1, b: 2 }), document.body)

</script>

</html>